<template>
    <div class="cu-modal" :class="{ show: showFeedback }" @click="closeAuthModal">
        <div class="cu-dialog" style="width: 890px;" @click.stop>
            <div class="p-30">
                <div class="head-box">
                    <div class="head-title">意见反馈</div>
                </div>
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
                    <el-form-item prop="mobile">
                        <el-input v-model="ruleForm.mobile" placeholder="请输入联系电话"></el-input>
                    </el-form-item>

                    <el-form-item prop="content">
                        <el-input type="textarea" :rows="8" placeholder="请输入反馈内容" v-model="ruleForm.content"
                            maxlength="200" show-word-limit>
                        </el-input>
                    </el-form-item>

                    <el-form-item class="text-left">
                        <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card"
                            :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                            <img v-if="ruleForm.images" :src="ruleForm.images" class="avatar">
                            <div v-else class="flex align-items flex-wrap center">
                                <i class="el-icon-plus"></i>
                                <div class="w-100">上传图片</div>
                            </div>
                        </el-upload>
                    </el-form-item>
                    <el-form-item class="text-center">
                        <el-button @click="closeAuthModal">取消</el-button>
                        <el-button type="danger" @click="submitForm('ruleForm')">提交</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
/**
 * 意见反馈弹窗
 */
import { mapMutations, mapActions, mapState, mapGetters } from 'vuex'
import test from '@/utils/test'
import { userFeedback } from '@/api/apis'
export default {
    name: 'feedbackModal',
    data () {
        // 验证手机号的规则
        var validateMobile = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('手机号码不能为空'))
            } else if (!test.mobile(value)) {
                callback(new Error('请输入正确的手机号码'))
            } else {
                callback()
            }
        };
        return {
            ruleForm: {
                mobile: '',
                content: '',
                images: '',
            },
            rules: {
                mobile: [{
                    required: true,
                    message: '请输入联系电话',
                    trigger: ['change', 'blur']
                }, {
                        validator: validateMobile,
                        trigger: ['change', 'blur']
                    }
                ],
                content: [
                    { required: true, message: '请输入反馈内容', trigger: 'blur' },
                    { min: 3, max: 200, message: '长度在 3 到 200 个字符', trigger: 'blur' }
                ]
            }
        }
    },
    computed: {
        ...mapGetters(['isLogin', 'isShowFeedbackModal']),
        showFeedback: {
            get () {
                return !!this.isShowFeedbackModal
            },
            set (value) {

            }
        },
    },
    methods: {
        ...mapActions(['getUserInfo', 'showFeedbackModal']),
        // 关闭模态框
        closeAuthModal () {
            this.$store.dispatch('showFeedbackModal', false)
        },
        handleRemove (file, fileList) {
            console.log(file, fileList)
        },
        handlePictureCardPreview (file) {
            this.dialogImageUrl = file.url
            this.dialogVisible = true
        },
        submitForm (formName) {
            let that = this;
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    userFeedback(that.ruleForm).then(res => {
                        if (res.code === 1) {
                            that.$message.success(res.msg)
                            that.closeAuthModal()
                        } else {
                            that.$message.error(res.msg)
                        }
                    })
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        },
    },
}
</script>

<style lang="less" scoped>
.head-box {
    margin-bottom: 15px;

    .head-title {
        font-size: 20px;
        font-weight: bold;
        color: #333;
    }
}

/deep/.el-upload--picture-card {
    width: 88px;
    height: 88px;
    line-height: 36px;

    i {
        margin-top: 15px;
    }
}
</style>